<template>
  <div class="screen_head">
    <div class="a2">
      <div class="b" v-for="(item,index) in list" :key="index">
        <div class="c">
          <span class="iconfont" :class="item.icon"></span>
        </div>
        <div class="c">
          <div class="c_title">{{item.title}}</div>
          <div class="c_p">
            <span>{{item.amount}}</span>
            <i>{{item.unit}}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "screen_head",  // 头部
    data() {
      return {
        date: '',  // 日期
        timer: null,
        list: [
          { id: 0, title: '总销售额', icon: 'icon-renminbi2', amount: '65,213,24', unit: '万元' },
          { id: 1, title: '总订单量', icon: 'icon-dingdan1', amount: '21,324', unit: '单' },
          { id: 2, title: '独立用户数', icon: 'icon-yonghu', amount: '68,576', unit: '个' },
          { id: 3, title: '商品种类', icon: 'icon-jiadianxiadanzhongleixuanze', amount: '958', unit: '万个' }
        ]
      }
    },
    destroyed() {
      this.timer = null;
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .screen_head {
    display: flex;
    justify-content: right;
    height: 100%;
    padding: 10px;
    .a2{
      width: calc(100% - 300px);
      padding: 10px 40px 10px 10px;
      display: flex;
      justify-content: right;
      .b{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        min-width: 20%;
        .c{
          span.iconfont{
            font-size: 36px;
            font-weight: bold;
            color: #666;
            margin-right: 8px;
          }
          .c_title{
            font-size: 16px;
            color: #9a6e3a;
            font-weight: bold;
          }
          .c_p{
            span{
              font-size: 28px;
              font-weight: bold;
              background-image: -webkit-linear-gradient(top, #fff, rgba(6, 165, 151,1), rgba(6, 165, 151, 0.4));
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            i{
              font-size: 12px;
              font-style: normal;
              margin-left: 4px;
              color: #aaa;
            }
          }
        }
      }
    }
  }
</style>
